<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./style.css">
  <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
  <title>Login Page</title>
</head>
<body>
<div id="page" class="site">
  <div class="container">
    <div class="login">
      <div class="hero">
        <h1>Sign In to<br> Open the World</h1>
        <p>If you don't have an account, <br> you can <a href="#">Register here</a></p>
      </div>
      <div class="main">
        <form action="">
          <p>
            <input type="email" placeholder="Your email address">
          </p>
          <p class="password">
            <input type="password" placeholder="Password">
            <i class="ri-eye-off-line"></i>
            <a href="#">Recovery password</a>
          </p>
          <p>
            <input type="submit" class="submit" value="Sign In">
          </p>
        </form>
        <div class="options">
          <div class="separator">
            <p>or continue with</p>
          </div>
          <ul>
            <li>
              <a href="#"><i class="ri-facebook-fill"></i></a>
            </li>
            <li>
              <a href="#"><i class="ri-twitter-fill"></i></a>
            </li>
            <li>
              <a href="#"><i class="ri-google-fill"></i></a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>
